<template>
  <van-cell>
        <van-image
          slot="icon"
          round
          width="30"
          height="30"
          style="margin-right: 10px;"
          :src="commentInfo.aut_photo"
        />
        <span style="color: #466b9d;" slot="title">{{commentInfo.aut_name}}</span>
        <div slot="label">
          <p style="color: #363636;">{{commentInfo.content}}</p>
          <p>
            <span style="margin-right: 10px;">{{ commentInfo.pubdate | relativeTime }}</span>
            <van-button size="mini" @click="$emit('openReply',commentInfo)" type="default">回复({{commentInfo.reply_count}})</van-button>
          </p>
        </div>
        <van-icon slot="right-icon" 
          @click="likeClick"
          :color="commentInfo.is_liking ? '#3296fa':'#333' "  
          :name="commentInfo.is_liking ? 'good-job':'good-job-o'"
        >
          {{commentInfo.like_count}}
        </van-icon>
      </van-cell>
</template>

<script>
import { addCommentLike,deleteCommentLike } from '@/api/comment'
import { mapGetters } from 'vuex'
  export default {
     name:'CommentInfo',
     props:{
      //  评论回复信息
       commentInfo:{
         type:Object,
         require:true
       }
     },
    computed: {
      ...mapGetters(['haslogin'])
    },
     methods: {
      // 点赞 取消点赞
      async likeClick(){
        if(!this.haslogin) return this.$toast.fail('请登录后再点赞')
        try {
          if(this.commentInfo.is_liking){
            // 要取消
            await deleteCommentLike(this.commentInfo.com_id)
            this.commentInfo.like_count--  // 更新数量
          }else{
            // 要点赞
            await addCommentLike(this.commentInfo.com_id)
            this.commentInfo.like_count++  // 更新数量
          }
          this.commentInfo.is_liking = !this.commentInfo.is_liking  // 更细状态
        } catch (error) {
          console.log(error);
          this.$toast('操作失败')
        }
      }
     },
  }
</script>

<style lang="less" scoped>

</style>